画像から代表色を4～12色自動抽出し、HEX/RGB/HSL、WCAGコントラスト比、CSS変数、パレットPNG、抽出色を使ったCSSグラデーションを生成します ブラウザー内のみ生成します。
JPG、PNG、WebP、GIF、SVGなど、ブラウザーで読み取れる画像
/* パレット抽出後にCSSが表示されます。 */
パレット抽出機能は、サンプリングされたピクセルを要約します。写真の中のどのオブジェクトが意味的に重要であるかはわかりません。適切な色数、サンプリング精度、コントラスト基準を選択し、生成されたパレットとグラデーションを絶対的な真実ではなくデザインの開始点として扱うことで、良い結果が得られます。
多くの場合、4 ～ 6 色の色を使用すると、より明確な UI パレットが生成されますが、色数が大きいほど、複雑な写真のアクセントがより多く保持されます。隣接するスウォッチがほぼ同じに見える場合は、冗長なトーンを維持する代わりに、色数を減らすかサンプリング精度を高めます。
高密度のサンプリングでは小さなアクセントをキャプチャできますが、より多くのブラウザーの作業が必要になります。より高速なサンプリングは、大きな画像や素早い探索に適しています。小さいけれども重要な色が欠落している場合は、より細かい設定で再実行します。
ある背景では鮮明に見える色でも、別の背景ではアクセシビリティ コントラストが失われる可能性があります。コントラストのリファレンスをガイドとして使用し、最終デザインで使用される実際の前景サイズ、重み、背景とテキストと UI の組み合わせを検証します。